<template>
  <div class="container">
    <toolbar :title="$route.meta.title" :back="true" :home="true"></toolbar>
    <div class="t-container border-top">
      <scroll>
        <cube-form
          ref="form"
          :model="form"
          :schema="schema"
          :immediate-validate="false"
          :options="options"
          @validate="validateHandler"
          @submit="submitHandler"
        ></cube-form>

        <form-btn btnText="注册" @onInput="input" @onSubmit="submit"></form-btn>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar"
import Scroll from 'components/Scroll'
import FormBtn from '../login/components/FormBtn'

import {show} from 'utils/Base'
import { Dialog } from 'cube-ui'

import {config} from 'assets/js/data'

import {sendSmsCode} from 'api/UtilsApi'
import {reg} from 'api/UsersApi'

export default {
  name: "Reg",
  components: {
    Toolbar,
    Scroll,
    FormBtn
  },
  data() {
    return {
      options: {
        scrollToInvalidField: true,
        layout: "classic"
      },
      form: {
        tel: "",
        code: "",
        serviceChecked: false
      },
      schema: {
        groups: [
          {
            fields: [
              {
                type: "input",
                modelKey: "tel",
                label: "手机号",
                props: {
                  placeholder: "请输入手机号",
                  clearable: true
                },
                rules: {
                  required: true,
                  type: 'tel'
                },
                messages: {
                  required: "手机号不能为空",
                  tel: '请输入正确格式的手机号'
                },
                events: {
                  'blur' (e) {
                    const tel = e.target.value;
                    Dialog.$create({
                      type: 'confirm',
                      content: '确定要给' + tel + '手机号发送验证码吗???',
                      title: '提示框',
                      confirmBtn: {
                        text: '发送',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                      },
                      cancelBtn: {
                        text: '取消发送',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                      },
                      onConfirm: () => {
                        sendSmsCode({
                          tel: tel,
                          module: config.module.UTILS
                        }).then(res => {
                          if(res.meta.success) {
                            show('发送成功')
                          } else show(res.meta.message);
                        });
                      }
                    }).show()
                  }
                }
              },
              {
                type: "input",
                modelKey: "code",
                label: "验证码",
                props: {
                  placeholder: "请输入验证码",
                  clearable: true
                },
                rules: {
                  required: true,
                  len: 4,
                  type: 'number'
                },
                messages: {
                  required: "验证码不能为空"
                }
              }
            ]
          }
        ]
      }
    };
  },
  methods: {
    validateHandler(result) {},
    submitHandler(e) {
      if(!this.form.serviceChecked) {
        show('请勾选协议和免责条款');
        return;
      }

      reg(this.form)
        .then(res => {
          if(res.meta.success) {
            show('注册成功');
            this.$router.back();
          } else show(res.meta.message)
        });
    },
    input(value) {
      this.form.serviceChecked = value
    },
    submit () {
      this.$refs.form.submit()
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
.container {
  height 100vh
  background #FFF

  & >>> .cube-form-item_required .cube-form-label::before {
    content: '';
  }

}
</style>
